@use "../../colors";

$green: #2B732B;

.bubble {
    background-color: rgba(0,0,0,.15);
    color: #fff;
    font-weight: 500;
    border-radius: 50px;
    padding: 8px 36px;
    font-size: 1rem;
    margin: 15px auto;
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        margin: 0px 8px;
        width: 30px;
        height: 30px;
    }
    &.increase{
        span{
            display: flex;
            justify-content: center;
            align-items: center;
            &:before{
                content: '';
                width: 30px;
                height: 30px;
                background-image: url("/images/annual-report/2020/Symbols-UI/Arrow_up.svg");
                background-size: contain;
                display: inline-block;
                margin-right: 10px;
            }
        }
    }
    &.spotlight{
        &:before{
            content: '';
            width: 30px;
            height: 30px;
            background-image: url("/images/annual-report/2020/Symbols-UI/LightBulb_spotlightstory.svg");
            background-size: contain;
            display: inline-block;
            margin-right: 10px;
        }
    }
    &.snapshot{
        &:before{
            content: '';
            width: 30px;
            height: 30px;
            background-image: url("/images/annual-report/2020/Symbols-UI/Camera_snapshots.svg");
            background-size: contain;
            display: inline-block;
            margin-right: 10px;
        }
    }

    &.darken{
        background-color: rgba(0, 0, 0, 0.15);
    }
    &.blue{
        background-color: colors.$motion-blue-3;
    }

    &.purple{
        background-color: colors.$ui-purple-dark;
    }
    &.green{
        background-color: $green;
    }
}